import React, { Component } from 'react'

export default class AppUI extends Component {
    state = {
        count: 0
    }

    // 加

    increment = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
        // console.log(selectVal)
        // console.log(typeof  selectVal)
        // 2  获取到初始状态 
        let count = this.state.count
        // 3  进行计算 并且更新状态
        this.setState({
            count: count + selectVal
        })

    }

    // 减
    decrement = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
        // console.log(selectVal)
        // console.log(typeof  selectVal)
        // 2  获取到初始状态 
        let count = this.state.count
        // 3  进行计算 并且更新状态
        this.setState({
            count: count - selectVal
        })

    }

    // 偶数加

    oddIncrement = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
        // console.log(selectVal)
        // console.log(typeof  selectVal)
        // 2  获取到初始状态 
        let count = this.state.count
        if (count % 2 == 0) {
            // 3  进行计算 并且更新状态
            this.setState({
                count: count + selectVal
            })

        }



    }
    //异步加

    asyncIncrement = () => {
        // 1  获取到选择框里面的值
        let selectVal = this.refs.selectVal.value * 1
        console.log(selectVal)
        console.log(typeof selectVal)
        // 2  获取到初始状态 
        let count = this.state.count
        setTimeout(() => {
            // 3  进行计算 并且更新状态
            this.setState({
                count: count + selectVal
            })
        }, 1000)

    }





    render() {
        //    let count=this.state.count
        let { count } = this.state
        return (
            <div>
                <p> click  {count}  times</p>
                <div>
                    <select ref='selectVal'>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
         <button onClick={this.increment}>+</button>&nbsp;
         <button onClick={this.decrement}>-</button>&nbsp;
         <button onClick={this.oddIncrement}>偶数加</button>&nbsp;
         <button onClick={this.asyncIncrement}>异步触发</button>

                </div>


            </div>

        )
    }
}